<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Store</title>
<link rel="stylesheet" type="text/css" href="${path }/style/style.css" />

<script>
	onload = registerUser;

	function registerUser(param) {
		var flag = true;
		var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
		//alert(222);
		var uname = document.getElementById("username");
		var upass = document.getElementById("password");
		var email = document.getElementById("email");
		var corparate = document.getElementById("corparate");
		var realname = document.getElementById("realname");
		var tel = document.getElementById("tel");

		checkData(uname, "用户名必须是五位", function(val) {
			if (val != null && val.length == 5) {

				return true;
			} else {
				flag = false;
				return false;
			}
		}, param);

		checkData(upass, "密码必须是六位", function(val) {
			if (val != null && val.length == 6) {
				return true;
			} else {
				flag = false;
				return false;
			}
		}, param);

		checkData(upass, "密码必须是六位", function(val) {
			if (val != null && val.length == 6) {
				return true;
			} else {
				flag = false;
				return false;
			}
		}, param);

		checkData(email, "必须符合邮箱规则", function(val) {
			if (myreg.test(val)) {
				return true;
			} else {
				flag = false;
				return false;
			}
		}, param);

		checkData(corparate, "公司不能为空", function(val) {
			if (!/^\s*$/.test(val)) {
				return true;
			} else {
				flag = false;
				return false;
			}
		}, param);

		checkData(realname, "真实姓名不能为空", function(val) {
			if (!/^\s*$/.test(val)) {
				return true;
			} else {
				flag = false;
				return false;
			}
		}, param); 

		checkData(tel, "必须符合手机号规则", function(val) {
			if (/^1[3|4|5|7|8]\d{9}$/.test(val)) {
				return true;
			} else {
				flag = false;
				return false;
			}
		}, param);

		return flag;
	}

	function checkData(obj, info, fun, param) {
		var nameSpan = getSpan(obj);
		obj.onfocus = function() {
			nameSpan.className = "state2";
			nameSpan.innerHTML = info;//"用户名必须是五位";
		}

		obj.onblur = function() {

			var value = obj.value;
			if (fun(value)) {
				if (obj.name == 'username') {
					/* var f = validateName(value);
					if(f){
						nameSpan.className = "state3";
						nameSpan.innerHTML="用户名可用";
					}else{
						nameSpan.className = "state4";
						nameSpan.innerHTML="用户名已经被注册";	
					}	 */
					var xmlHttp = new XMLHttpRequest();
					xmlHttp.onreadystatechange = function() {
						if (xmlHttp.status == 200) {
							if (xmlHttp.readyState == 4) {
								var s = xmlHttp.responseText;
								//alert(22222);
								if (s == '1') {
									nameSpan.className = "state4";
									nameSpan.innerHTML = "用户名已经被注册";
								} else {
									nameSpan.className = "state3";
									nameSpan.innerHTML = "用户名可用";
								}

								//alert(flag+"============");
							}
						}
					}
					var url = "${path }/user/validateName?uname=" + value;
					xmlHttp.open("get", url, true);

					xmlHttp.send();

				} else {
					nameSpan.className = "state3";
					nameSpan.innerHTML = "OK";
				}

			} else {
				nameSpan.className = "state4";
				nameSpan.innerHTML = info;//"用户名必须是五位";
			}
		}

		if (param == 'p') {
			obj.onblur();
		}
	}

	function getSpan(obj) {
		while (true) {
			if (obj.previousSibling.nodeName != "SPAN") {
				obj = obj.previousSibling;
			} else {
				return obj.previousSibling;
			}
		}
	}

	function validateName(name) {
		var flag = true;
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.status == 200) {
				if (xmlHttp.readyState == 4) {
					var s = xmlHttp.responseText;
					//alert(22222);
					if (s == '1') {
						flag = false;
					}

					//alert(flag+"============");
				}
			}
		}
		var url = "${path }/user/validateName?uname=" + name;
		xmlHttp.open("get", url, false);

		xmlHttp.send();

		//alert(flag+"----------------");
		return flag;
	}
</script>
<style>
.state1 {
	color: #CCC;
	font-size: 9pt;
}

.state2 {
	color: #000;
	font-size: 9pt;
}

.state3 {
	color: green;
	font-size: 9pt;
}

.state4 {
	color: red;
	font-size: 9pt;
}
</style>
</head>
<body>
	<div id="wrap">

		<jsp:include page="../common/header.jsp">
			<jsp:param value="register" name="css" />
		</jsp:include>

		<div class="center_content">
			<div class="left_content">
				<div class="title">
					<span class="title_icon"><img
						src="${path }/images/bullet1.gif" alt="" title="" /></span>用户注册
				</div>

				<div class="feat_prod_box_details">
					<p class="details">
						本书店是天创集团旗下的天智教育经营的书店，开业十年来，一直与国内外五百家出版社，近千家发行单位保持着良好的合作关系。以其集文化传播、艺术鉴赏、休闲为一体的崭新经营方式、一流的购书环境及优质的服务，赢得了众多的荣誉，成为华东地区最大的集图书、音像制品、文化用品、快餐、软件开发、广告策划于一体的图书零售企业。
					</p>

					<div class="contact_form">
						<div class="form_subtitle">创建新用户</div>
						<form name="register" action="${path }/user/register"
							method="post" onsubmit="return registerUser('p')">
							<div class="form_row">
								<label class="contact"><strong>用户名:</strong></label> <span
									class="state1">用户名必须是五位</span> <input type="text" id="username"
									name="username" class="contact_input" />
							</div>


							<div class="form_row">
								<label class="contact"><strong>密码:</strong></label> <span
									class="state1">密码必须是六位</span> <input type="text" id="password"
									name="password" class="contact_input" />
							</div>

							<div class="form_row">
								<label class="contact"><strong>真实姓名:</strong></label> <span
									class="state1">真实姓名不能为空</span> <input type="text" id="realname"
									name="realname" class="contact_input" />
							</div>
							
							<div class="form_row">
								<label class="contact"><strong>性别:</strong></label> <span
									class="state1">性别必需填选择一个</span> 
									男<input type="radio" name="gender" value="0" />&nbsp;
									女<input type="radio" name="gender" value="1" />
							</div>
							
							<div class="form_row">
								<label class="contact"><strong>邮箱:</strong></label> <span
									class="state1">必须符合邮箱规则</span> <input type="text" name="email"
									id="email" class="contact_input" />
							</div>


							<div class="form_row">
								<label class="contact"><strong>电话:</strong></label> <span
									class="state1">必须符合手机号规则</span> <input type="text" name="tel"
									id="tel" class="contact_input" />
							</div>

							<div class="form_row">
								<label class="contact"><strong>公司:</strong></label> <span
									class="state1">公司不能为空</span> <input type="text" id="corparate"
									name="corparate" class="contact_input" />
							</div>

							<div class="form_row">
								<div class="terms">
									<input type="checkbox" name="terms" /> 我同意 <a href="#">terms
										&amp; conditions</a>
								</div>
							</div>


							<div class="form_row">
								<input type="submit" class="register" value="注册" />
							</div>
						</form>
					</div>

				</div>

				<div class="clear"></div>
			</div>
			<!--end of left content-->

			<!-- 右边内容开始 -->
			<%@ include file="../common/aside.jsp"%>
			<!--end of right content-->

			<div class="clear"></div>
		</div>
		<!--end of center content-->


		<%@ include file="../common/foot.jsp"%>


	</div>

</body>
</html>